<!--
 * @Author: aliyun3129073295 1718324422@qq.com
 * @Date: 2022-10-24 10:29:01
 * @LastEditors: zhuxin xu
 * @LastEditTime: 2023-01-30 10:36:17
 * @FilePath: \xu_vue\src\components\nav.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main">
    <el-col :span="24">
      <div class="logo">
        <img src="../assets/pic/logo 2@3x.png" alt />
        <div class="titleone">
          <div class="title">E发单系统</div>
          <div class="desc">合肥中棕科技有限公司</div>
        </div>
      </div>
      <el-menu
        router
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#FFFFFF"
        text-color="#000"
        active-text-color="#04A5AB"
        active-background-color="#000"
      >
        <el-menu-item index="/">
          <i class="el-icon-menu"></i>
          <span slot="title">数据总览</span>
        </el-menu-item>
        <el-menu-item index="/userManagement">
          <i class="el-icon-s-custom"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/positionManage">
          <i class="el-icon-menu"></i>
          <span slot="title">职位管理</span>
        </el-menu-item>
        <el-menu-item index="/anmation">
          <i class="el-icon-menu"></i>
          <span slot="title">动画轮播</span>
        </el-menu-item>
        <el-menu-item index="/text">
          <i class="el-icon-menu"></i>
          <span slot="title">数据测试</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  name,
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style  scoped>
.main {
  position: fixed;
  height: 1080px;
}
.logo {
  width: 296px;
  height: 96px;
  display: flex;
  align-items: center;
}
.logo img {
  width: 46px;
  margin-left: 40px;
}
.title {
  font-family: PingFangSC-Medium;
  font-size: 17px;
  color: #162630;
  letter-spacing: -0.3px;
  line-height: 28px;
  font-weight: 500;
  text-align: left;
  margin-left: 16px;
}
.desc {
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: rgba(22, 38, 48, 0.6);
  letter-spacing: -0.1px;
  line-height: 20px;
  font-weight: 400;
  margin-left: 16px;
}
.logo .titleone {
  display: flex;
  flex-direction: column;
}

::v-deep(.el-menu-item) {
  width: 264px;
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: #162630;
  letter-spacing: -0.2px;
  font-weight: 400;
  text-align: left;
  background-color: #6cbdc0;
  border-radius: 12px;
  margin-left: 16px;
}

::v-deep(.el-icon-menu, .el-icon-s-home, .el-icon-s-custom) {
  margin-left: 10px;
}
::v-deep(.el-icon-s-home) {
  margin-left: 10px;
}
::v-deep(.el-icon-s-custom) {
  margin-left: 10px;
}
::v-deep(.el-menu-item span) {
  display: inline-block;
  margin-left: 10px;
}
</style>